<template>
  <view class="detail_root_box">
    <view class="show_box">
      <view class="image_list_box">
        <view class="half_box">
          <img
            v-for="(item, index) in leftList"
            :key="index"
            :src="item.url"
            class="img_box"
            :class="{ is_loading: item.loading }"
            @load="item.loading = false"
            @click="toDetail(item, index * 2)"
          />
        </view>
        <view class="half_box">
          <img
            v-for="(item, index) in rightList"
            :key="index"
            :src="item.url"
            class="img_box"
            :class="{ is_loading: item.loading }"
            @load="item.loading = false"
            @click="toDetail(item, index * 2 + 1)"
          />
        </view>
      </view>
      <view class="common_btn_box">
        <view class="btn" hover-class="is_hover" @click="toAdd">Add</view>
        <view class="btn" hover-class="is_hover" @click="toClose">Close</view>
      </view>
    </view>

    <viewer
      :url="current"
      v-if="isDetail"
      class="viewer_box"
      @return="isDetail = false"
      @change="onChange"
    />
  </view>
</template>

<script>
import viewer from "./viewer.vue";

export default {
  components: { viewer },
  props: {
    url: {},
  },
  watch: {
    url: {
      handler(newVal) {
        this.path = newVal;
        this.requestPage();
      },
      immediate: true,
    },
  },
  data() {
    return {
      visible: { show: false },
      htmlStr: undefined,
      path: undefined,
      imageList: [
        {
          loading: false,
          url: "https://sjbz-fd.zol-img.com.cn/t_s1080x1920c/g5/M00/00/02/ChMkJ1fJVAaIUfHOABmDh0MYG44AAU9uQN4hasAGYOf772.jpg",
        },
      ],
      isDetail: false,
      current: undefined,
      currentIndex: -1,

      addPage: 0,
      preffix: undefined,
      suffix: undefined,
    };
  },
  computed: {
    leftList() {
      return this.imageList.filter((e, index) => index % 2 == 0);
    },
    rightList() {
      return this.imageList.filter((e, index) => index % 2 == 1);
    },
  },
  methods: {
    requestPage() {
      // 发起 GET 请求
      uni.request({
        url: this.path,
        method: "GET", // 指定请求方法为 GET
        success: (res) => {
          console.log("res：", res);
          this.htmlStr = res.data;
          this.parseHtmlStr();
        },
        fail: (error) => {
          console.error("请求失败:", error); // 处理请求失败的情况
          this.htmlStr = error;
        },
      });
    },
    parseHtmlStr() {
      const afterBody = this.htmlStr.substring(
        this.htmlStr.indexOf("articleBody")
      );
      const afterSrc = afterBody.substring(afterBody.indexOf('src="') + 5);
      const src = afterSrc.substring(0, afterSrc.indexOf('"'));
      //https://s.wujituku.com/24/12/content_6/86596/0001.webp

      const preffix = src.substring(0, src.lastIndexOf("/"));
      const suffix = src.substring(src.lastIndexOf("."));
      const list = [];
      for (let index = 1; index < 10; index++) {
        if (index < 10) {
          list.push({ loading: true, url: preffix + "/000" + index + suffix });
        } else if (index < 100) {
          list.push({ loading: true, url: preffix + "/00" + index + suffix });
        } else {
          list.push({ loading: true, url: preffix + "/0" + index + suffix });
        }
      }
      this.preffix = preffix;
      this.suffix = suffix;
      this.imageList = list;
      console.log("this.imageList：", this.imageList);
    },
    toAdd() {
      let index = 10 + 10 * this.addPage;
      this.addPage++;
      let count = 10 + 10 * this.addPage;
      for (; index < count; index++) {
        if (index < 100) {
          this.imageList.push({
            loading: true,
            url: this.preffix + "/00" + index + this.suffix,
          });
        } else {
          this.imageList.push({
            loading: true,
            url: this.preffix + "/0" + index + this.suffix,
          });
        }
      }
      console.log("this.imageList：", this.imageList);
    },
    toDetail(item, index) {
      this.current = item.url;
      this.isDetail = true;
      this.currentIndex = index;
    },
    onChange(isPre) {
      const index = this.currentIndex + (isPre ? -1 : 1);
      if (index >= 0 && index < this.imageList.length) {
        this.current = this.imageList[index].url;
        this.currentIndex = index;
      }
    },
    toClose() {
      this.$emit("close");
    },
  },
  mounted() {},
  created() {},
};
</script>

<style lang="scss" scoped>
.detail_root_box {
  height: 100%;
  background: black;
  position: relative;
}

.label_text {
  color: white;
  word-wrap: break-word;
  word-break: normal;
  white-space: pre-wrap;
}

.show_box {
  height: 100%;
}

.image_list_box {
  display: flex;
  padding: 12rpx 6rpx;
  height: calc(100% - 24rpx - 64rpx);
  box-sizing: border-box;
  overflow: auto;

  .half_box {
    width: 50%;
    padding: 0 6rpx;

    .img_box {
      width: 100%;
      min-height: 200rpx;
      object-fit: contain;
      position: relative;
      border-radius: 10rpx;
      background: #8f8d8e;
    }
  }
}

.viewer_box {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100vh;
}
</style>

<style lang="scss">
.u-swiper__wrapper__item__wrapper__image > div {
  background-size: contain !important;
}
</style>